<template>
    <div class="fullscreen introduction">
        <LaserRadarHeader />
        <div class="content">
            <span>{{ IntroductionComponent.Default.Title }}</span>
            <span>{{ IntroductionComponent.Default.Description }}</span>
            <!-- <img :src="IntroductionComponent.Default.Img" :alt="IntroductionComponent.Default.Title"> -->
        </div>
        <LaserRadarAside />
    </div>
</template>

<script setup lang="ts">
import LaserRadarHeader from './LaserRadarHeader.vue';
import LaserRadarAside from './LaserRadarAside.vue';
import { IntroductionComponent } from './LaserRadarComponent';
import { onMounted, onUnmounted } from 'vue';

onMounted(() => IntroductionComponent.Default.Awake());
onUnmounted(() => IntroductionComponent.Default.Destroy());
</script>

<style scoped>
.introduction {
    background-color: #0d0d14;
}

.content {
    position: relative;
    top: 13.2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 2rem;
}

.content>span {
    color: #B1B1D4;
}

span:first-of-type {
    font-size: 3.6rem;
}

span:last-of-type {
    font-size: 1.8rem;
    max-width: 100rem;

    white-space: pre-wrap;
    text-indent: 2em;
}
</style>